<template>
  <div class="box">
    <div ref="lle" style="display:none" class="box-a">
      <Slide />
    </div>
    <div @click="xian()" class="box-x">
        <i v-show="flag" class='el-icon-menu'></i>
        <i v-show="!flag" class="el-icon-caret-right"></i>

    
    </div>

    <div class="box-b">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Slide from "./views/detail/index.vue";
export default {
  components: {
    Slide,
  },
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    xian() {
      this.flag = !this.flag;
      console.log(this.$refs.lle);
      this.$refs.lle.style = "";
      if (!this.flag) {
        this.$refs.lle.style.animation = "0.2s a1 linear";
        this.$refs.lle.style.display = "block";
      } else {
        this.$refs.lle.style.animation = "0.2s a2 linear";
        this.$refs.lle.style.display = "block";
        setTimeout(() => {
          this.$refs.lle.style.display = "none";
        }, 190);
      }
    },
  },
};
</script>

<style>
.box-a {
  width: 20%;
  position: fixed;
  top: 0;
  right: 0;
}
@keyframes a2 {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(250px);
  }
}
@keyframes a1 {
  0% {
    transform: translate(250px);
  }
  100% {
    transform: translate(0);
  }
}
.box-aa {
  width: 20%;
  position: fixed;
  top: 0;
  right: -250px;
}
.box {
  width: 100%;
}
* {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
a {
  text-decoration: none;
  color: black;
}
.box-x {
  cursor:pointer;
  text-align: center;
  width: 30px;
  line-height: 30px;
  /* border: 1px solid; */
  position: fixed;
  bottom: 50px;
  right: 100px;
}
</style>